<template>
  <div>
    <el-button type="danger">搜索</el-button>
    <el-button type="danger">添加</el-button>
    <el-button type="danger">删除</el-button>
    <el-button type="danger">启用</el-button>
    <el-button type="danger">禁用</el-button>
  </div>
  <el-table ref="multipleTableRef" :data="tableData" row-key="id" style="width: 100%">
    <el-table-column type="selection" width="55" />

    <el-table-column property="id" label="编码"/>
    <el-table-column property="name" label="标题" />
    <el-table-column property="description" label="分组"/>
    <el-table-column property="path" label="控制地址" />
    <el-table-column property="type" label="商机菜单"/>
    <el-table-column property="sort" label="排序"/>

    <el-table-column label="状态">
      <template #default="scope">
        <el-switch v-model="value2" class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
      </template>
    </el-table-column>
    <el-table-column label="操作"  width="240">
      <template #default="scope">
        <el-button>编辑</el-button>
        <el-button>授权</el-button>
        <el-button>删除</el-button>
      </template>
    </el-table-column>

  </el-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { TableInstance } from 'element-plus'
const value2 = ref(true)
interface User {
  id: number
  date: string
  name: string
  address: string
}

const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<User[]>([])


const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

const tableData = [
  {
    id: 1,
    name: '系统管理',
    description: '系统管理',
    path: 'Systems/menu',
    type: '根菜单',
    sort: 2
  },
  {
    id: 31,
    name: '首页管理',
    description: '首页管理',
    path: 'Index/index',
    type: '根菜单',
    sort: 1
  },
  {
    id: 49,
    name: '运营管理',
    description: '运营管理',
    path: 'Operation/menu',
    type: '根菜单',
    sort: 5
  },
  {
    id: 84,
    name: '订单管理',
    description: '订单管理',
    path: 'Order/menu',
    type: '根菜单',
    sort: 6
  },
  {
    id: 92,
    name: '结算管理',
    description: '结算管理',
    path: 'Finance/menu',
    type: '根菜单',
    sort: 7
  },
  {
    id: 138,
    name: '用户管理',
    description: '用户管理',
    path: 'User/menu',
    type: '根菜单',
    sort: 0
  },
  {
    id: 139,
    name: '店铺管理',
    description: '店铺管理',
    path: 'Shop/menu',
    type: '根菜单',
    sort: 0
  },
]
</script>


<style lang='less' scoped></style>